<template>
  <div class="app-container">  
    <el-form :inline="true" :model="listQuery" class="demo-form-inline">
      <i class="el-icon-search btn-search" @click="handleShowSearch()"></i>
        <div class="btn-box">
          
        <a
          class="el-button el-button--success el-button--medium"
          href="http://123.57.59.222:8081/api/file/course_supplier_settlement_template.xlsx"
          type="primary"
          >模版下载</a>
        <el-upload
          :action="UploadUrl()"
             :show-file-list="false"
            
            :on-success="handleImageSuccess"
          
               
          class="upload_image"
        >
          <el-button type="primary" v-show='roleName=="admin"'>导入</el-button>
 </el-upload>
         <el-button
          :disabled='list.length<=0'
           
              type='primary'
          @click="dowloadExcel()"
          icon="el-icon-document"
        >导出excel</el-button>
      </div>
      <div   v-show="showbtns==true"  class="search-lf" style="width:76%">
            <el-form-item width="200px" label="供应商名称">
        <el-input v-model="listQuery.supplierName" placeholder="供应商名称"></el-input>
      </el-form-item>
      <el-form-item  label="po单号">
        <el-input v-model="listQuery.po" placeholder="po单号"></el-input>
      </el-form-item>
      <el-form-item label="课程编导">
        <el-select filterable v-model="listQuery.courseChargeName" placeholder="请选择">
          <el-option
            v-for="item in courseChargeList"
            :key="item.id"
            :label="item.name"
            :value="item.name"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="课程名称">
        <el-input v-model="listQuery.courseName" placeholder="课程名称"></el-input>
      </el-form-item>
      <el-form-item label="支付状态">
             <el-select filterable v-model="listQuery.paymentStateName"  @change="handlePaymentState($event)" placeholder="请选择">
          <el-option
            v-for="item in payMents"
            :key="item.id"
            :label="item.name"
            :value="item.name"
          ></el-option>
        </el-select>
      </el-form-item>
       <el-form-item label="税点">
        <el-input v-model="listQuery.taxPoint" placeholder="税点"></el-input>
      </el-form-item>
        <el-form-item style="width:10px">
        <el-button  type="primary" plain  @click="getList()">查询</el-button>
       
       
      </el-form-item>
         
      </div>
 
    

    
    </el-form>
    <el-table  v-loading="listLoading"  border
 height='650px' :data="list" fit highlight-current-row style="width: 100%">
    
      <el-table-column align="center" width='60px' label="序号">
        <template slot-scope="scope">
          <span>{{ scope.$index+1 }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width="130px" label="PO单号">
        <template slot-scope="{row}">
          <span>{{ row.po }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="课程ID">
        <template slot-scope="{row}">
          <span>{{ row.courseId }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="课程名称">
        <template slot-scope="{row}">
          <span>{{ row.courseName }}</span>
        </template>
      </el-table-column>
      <el-table-column sort align="center"  label="课程编导">
        <template slot-scope="{row}">
          <span>{{ row.courseChargeName }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width='100px' label="供应商类型">
        <template slot-scope="{row}">
          <span>{{ row.supplierTypeName }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" width="200" label="供应商名称">
        <template slot-scope="{row}">
          <span>{{ row.supplierName }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width="200px" label="客户名称">
        <template slot-scope="{row}">
          <span>{{ row.customerName }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="合同金额">
        <template slot-scope="{row}">
          <span>{{ row.poContractAmount }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="服务类型">
        <template slot-scope="{row}">
          <span>{{ row.serviceTypeName }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" width="120px" label="已交付时长">
        <template slot-scope="{row}">
          <span>{{ row.contractFinishedTimeLength }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="单价">
        <template slot-scope="{row}">
          <span>{{ row.unitPrice }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="数量">
        <template slot-scope="{row}">
          <span>{{ row.quantity }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="预估成本">
        <template slot-scope="{row}">
          <span>{{ row.estimatedGenerationCost }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="已支付">
        <template slot-scope="{row}">
          <template v-if="row.rowEdit">
            <el-input v-model="settlementList.supplierPaidAmount" />
          </template>
          <span v-else>{{ row.supplierPaidAmount }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="未支付">
        <template slot-scope="{row}">
          <span>{{ row.supplierUnpaidAmount }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="实际单价">
        <template slot-scope="{row}">
          <template v-if="row.rowEdit">
            <el-input v-model="settlementList.actualUnitPrice" />
          </template>
          <span v-else>{{ row.actualUnitPrice }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="实际数量">
        <template slot-scope="{row}">
          <template v-if="row.rowEdit">
            <el-input v-model="settlementList.actualQuantity" />
          </template>
          <span v-else>{{ row.actualQuantity }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="其他费用">
        <template slot-scope="{row}">
          <template v-if="row.rowEdit">
            <el-input v-model="settlementList.otherExpenses" />
          </template>
          <span v-else>{{ row.otherExpenses }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width="100px" label="实际总成本">
        <template slot-scope="{row}">
          <span>{{ row.actualTotalCost }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width="160px"  label="实际时长">
        <template slot-scope="{row}">
          <template v-if="row.rowEdit">
             <el-input
              v-model="settlementList.actualTimeLength"
              placeholder="hh:mm:ss格式"
            ></el-input>
            <!-- <el-input v-model="settlementList.actualTimeLength" /> -->
          </template>
          <span v-else>{{ row.actualTimeLength }}</span>
        </template>
      </el-table-column>

      <!-- <el-table-column align="center" width="100px" label="实际支付">
        <template slot-scope="{row}">
          <span>{{ row.contractPurchaseAmount }}</span>
        </template>
      </el-table-column> -->
      <el-table-column align="center" label="支付状态">
        <template slot-scope="{row}">
          <template v-if="row.rowEdit">
               <el-select filterable v-model="settlementList.paymentStateName"  @change="handlePaymentState($event)" placeholder="请选择">
          <el-option
            v-for="item in payMents"
            :key="item.id"
            :label="item.name"
            :value="item.name"
          ></el-option>
        </el-select>
          
           
          </template>
          <span v-else>{{ row. paymentStateName }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="发票类型">
        <template slot-scope="{row}">
          <template v-if="row.rowEdit">
            <!-- <el-input v-model="settlementList.invoiceTypeName"/> -->
            <el-select filterable
              v-model="settlementList.invoiceTypeName"
              @change="handleChangePro7($event)"
              placeholder="请选择"
            >
              <el-option
                v-for="item in invoiceList"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              ></el-option>
            </el-select>
          </template>
          <span v-else>{{ row.invoiceTypeName }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center"  label="税点">
        <template slot-scope="{row}">
          <template v-if="row.rowEdit">
            <el-input v-model="settlementList.taxPoint" />
          </template>
          <span v-else>{{ row.taxPoint }}</span>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" width="100px" label="拍摄素材">
        <template slot-scope="{row}">
          <template v-if="row.rowEdit">
            <!-- <el-input /> -->
            <el-select filterable v-model="settlementList.shootSourceMaterial">
              <el-option label="有" value="true"></el-option>
              <el-option label="无" value="false"></el-option>
            </el-select>
          </template>
          <span v-else>{{ row.shootSourceMaterial }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width="100px" label="工程归档">
        <template slot-scope="{row}">
          <template v-if="row.rowEdit">
            <el-select filterable v-model="settlementList.projectFiling">
              <el-option label="有" value="true"></el-option>
              <el-option label="无" value="false"></el-option>
            </el-select>
          </template>
          <span v-else>{{ row.projectFiling |statusColorFilter }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width="100px" label="净版归档">
        <template slot-scope="{row}">
          <template v-if="row.rowEdit">
            <el-select filterable v-model="settlementList.pureFiling">
              <el-option label="有" value="true"></el-option>
              <el-option label="无" value="false"></el-option>
            </el-select>
          </template>
          <span v-else>{{ row.pureFiling |statusColorFilter }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width="100px" label="归档时间">
        <template slot-scope="{row}">
           <template v-if="row.rowEdit">
            <el-date-picker
              v-model=" settlementList.filingDate"
              type="date"
              placeholder="选择日期"
              format="yyyy/MM/dd"
              value-format="yyyy/MM/dd"
            ></el-date-picker>
          </template>
          <span v-else>{{ row.filingDate }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width="120px" label="预估结算日期">
        <template slot-scope="{row}">
          <span>{{ row.estimatedSettlementDate }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width="100px" label="结款日期">
        <template slot-scope="{row}">
          <template v-if="row.rowEdit">
            <el-date-picker
              v-model=" settlementList.settlementDate"
              type="date"
              placeholder="选择日期"
              format="yyyy/MM/dd"
              value-format="yyyy/MM/dd"
            ></el-date-picker>
          </template>
          <span v-else>{{ row.settlementDate }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width="100px" label="更新日期">
        <template slot-scope="{row}">
          <template v-if="row.rowEdit">
            <el-date-picker
              v-model=" settlementList.updateTime"
              type="date"
              placeholder="选择日期"
              format="yyyy/MM/dd"
              value-format="yyyy/MM/dd"
            ></el-date-picker>
          </template>
          <span v-else>{{ row.updateTime }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" fixed="right" label="操作" width="240">
        <template slot-scope="{row}">
          <el-button
            type="warning"
            v-show='isRolds==0'
            :disabled="row.state==1"
            @click="handleAdd(row)"
            size="mini"
            icon="el-icon-edit"
          >入库</el-button>
          <el-button
            v-if="row.rowEdit"
            type="success"
            size="mini"
            icon="el-icon-circle-check-outline"
            @click="confirmRole(row)"
          >保存</el-button>

          <el-button
            v-else
            type="primary"
            :disabled="row.state==1"
            @click="handleEdit(row)"
            size="mini"
             icon="el-icon-edit"
          >编辑</el-button>

          <el-button
            :disabled="row.state==1"
            @click="handleDel(row.id)"
            class="mg-l"
            type="danger"
            size="mini"
            icon="el-icon-delete"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :close-on-click-modal='false'   :visible.sync="dialogVisible" height='600px' width="70%" :title="dialogType==='edit'?'入库单':'入库单'">
      <el-form label-width="100px" class="rk_form" ref="poesList" :model="poesList" label-position="right">
        <el-row >
          <el-col class="col-border-ru">
            <div class="part1">
              <el-row>
                <el-col :span='12'>
                   <el-form-item label="入库ID">
                <span style="color:#429EFF">{{poesList.id}}</span>
              </el-form-item>
                </el-col>
                <el-col :span='12'>
                  <el-form-item  label="PO单号">
                    

                    <span style="color:#429EFF">{{poesList.po}}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span='12'>
                   <el-form-item label="客户名称">
                    <!-- <el-input v-model="poesList.customerName" /> -->

                    <span style="color:#429EFF">{{poesList.customerName}}</span>
                  </el-form-item>
                </el-col>
                <el-col :span='12'>
                   <el-form-item label="课程编导">
                    <span style="color:#429EFF">{{poesList.courseChargeName}}</span>
                  </el-form-item>
               
                </el-col>
              </el-row>
             
                
               
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="课程ID">
                    <span style="color:#429EFF">{{poesList.courseId}}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="课程名称">
                    <span style="color:#429EFF">{{poesList.courseName}}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              
              <el-row  :gutter="20">
                <el-col :span='12'>
                   
                  <el-form-item label="专业分类">
                    <span style="color:#429EFF">{{poesList.majorCategory}}</span>
                  </el-form-item>
                
                </el-col>
                 <el-col :span="12">
                  <el-form-item label="学科门类">
                    <span style="color:#429EFF">{{poesList.subjectCategoryName}}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                   <el-form-item  label="省份">
                    <!-- <el-input v-model="poesList.provinceName" /> -->

                    <span style="color:#429EFF">{{poesList.provinceName}}</span>
                  </el-form-item>
                </el-col>
               <el-col :span='12'>
                  <el-form-item label="课程质量评级">
                    <el-rate v-model="poesList.courseQualityEvaluation"></el-rate>
                  </el-form-item>
               </el-col>
              
              </el-row>
              <el-form-item label="讲师">
                <el-input v-model="poesList.teacher" placeholder="请输入" />
              </el-form-item>
              <el-form-item label="拍摄形式">
                <el-input v-model="poesList.inShootMode" placeholder="请输入" />
              </el-form-item>
               <el-form-item label="课程质量评语">
                    <el-input v-model="poesList.courseQualityComment" />
                  </el-form-item>
            </div>
            <!-- <el-form-item label="入库基本信息"></el-form-item> -->
            <div class="part_title">
              <span>入库基本信息</span>
              <i class="span_border"></i>
              <!-- <span class="title_bor"></span> -->
            </div>
            <div class="ru_border">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="提供人">
                    <el-input v-model="poesList.inProvider" placeholder="请输入 " />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="提供方式">
                    <el-input v-model="poesList.inProvideMode" placeholder="请输入 " />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item  label="提供日期">
                    <el-date-picker
                      v-model="poesList.inProvideDate"
                      type="date"
                      placeholder="选择日期"
                      format="yyyy/MM/dd"
                      value-format="yyyy/MM/dd"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label-width="100px" label="可结款日期">
                    <el-date-picker
                      v-model="poesList.inSettlementDate"
                      type="date"
                      placeholder="选择日期"
                      format="yyyy/MM/dd"
                      value-format="yyyy/MM/dd"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item label-width="100px" label="视频存档URL">
                <el-input v-model="poesList.inVideoUrl" placeholder="请输入视频存档URL" />
              </el-form-item>
              <el-form-item label-width="100px" label="工程存档URL">
                <el-input v-model="poesList.inProjectUrl" placeholder="请输入工程存档URL " />
              </el-form-item>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item  label-width="110px" label="实际时长">
                    <span  style="color:#429EFF">{{poesList.actualTimeLength}}</span>
                    <!-- <el-input disabled v-model="poesList.actualTimeLength" placeholder="请输入 " /> -->
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label-width="100px" label="约定售后期限">
                    <!-- <el-input v-model="poesList." placeholder="请输入 " /> -->
                    <el-date-picker
                      v-model="poesList.inAfterSaleTimeLimit"
                      type="date"
                      placeholder="选择日期"
                      format="yyyy/MM/dd"
                      value-format="yyyy/MM/dd"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item label="课程备注">
                <el-input v-model="poesList.inCourseLibRemark" placeholder="请输入 " />
              </el-form-item>
            </div>
          </el-col>

          <el-col  class="col-birder-r">
           
               <div class="part_title">
              <span>状态反馈信息</span>
              <i class="span_border"></i>
             
            </div>
            <div class="ru_border">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="开始下载时间">
                    <el-input v-model="poesList.feedbackDownloadStartTime" placeholder="请输入 " />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="完成下载时间">
                    <el-input v-model="poesList.feedbackDownloadEndTime" placeholder="请输入 " />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item  label="课程核对状态">
                <el-input v-model="poesList.feedbackCourseCheckState" placeholder="请输入 " />
              </el-form-item>
              <el-form-item label="课程反馈状态">
                <el-input v-model="poesList.feedbackCourseState" placeholder="请输入 " />
              </el-form-item>
              <el-form-item label="ERP反馈状态">
                <el-input v-model="poesList.feedbackErpState" placeholder="请输入 " />
              </el-form-item>
            </div>
           
                <div class="part_title">
              <span>供应商信息</span>
              <i class="span_border"></i>
             
            </div>
            <el-row :gutter='20'>
                <el-col :span='12'>
                  <el-form-item class="label-pos"  label="供应商名称">
                    <span style="color:#429EFF">{{poesList.supplierName}}</span>
                    <!-- <el-input v-model="" disabled placeholder=" " /> -->
                  </el-form-item>
                </el-col>
                <el-col :span='12'>
                  <el-form-item class="label-pos" label="结款人">
                    <el-input v-model="poesList.supplierInfoPayer" placeholder=" " />
                  </el-form-item>
                </el-col>
            </el-row>
            
              
                <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="版本信息">
                    <el-input v-model="poesList.supplierInfoVersion" placeholder="请输入 " />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item class="ysd_right" label="验收单">
                    
                    <a
                      @click="uploadPath"
                      v-if="this.poesList.acceptanceReportPath"
                      class="el-icon-download"
                    >下载</a>
                       <a
                  
                      v-else
                    
                    >无</a>

                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                
                  <el-row :gutter="20">
                    <el-col :span="12">
                      <el-form-item label="终版数量">
                        <el-input
                          v-model="poesList.supplierInfoEndEditionQuantity"
                          placeholder="请输入 "
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item class="label_center" label="净版数量">
                        <el-input v-model="poesList.supplierInfoPureQuantity" placeholder="请输入 " />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="20">
                    <el-col :span="12">
                      <el-form-item label="字幕数量">
                        <el-input
                          v-model="poesList.supplierInfoSubtitlesNumber"
                          placeholder="请输入 "
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item  class="label_center" label="工程数量">
                        <el-input v-model="poesList.supplierInfoProjectNumber" placeholder="请输入 " />
                      </el-form-item>
                    </el-col>
                  </el-row>
              
             
              </el-row>
            <el-form-item  class="label_center" label="备注信息">
                    <el-input
                      type="textarea"
                      :rows="4"
                      v-model="poesList.supplierInfoAcceptanceReportRemark"
                      placeholder="请输入 "
                    />
                  </el-form-item>
                  <div class="flex-box">
                    <div class="flex-iten">
                        <el-form-item label="大纲"  label-width="80px">
                          
                    <el-radio v-model="poesList.supplierInfoIsOutline" label="1">有</el-radio>
                    <el-radio v-model="poesList.supplierInfoIsOutline" label="0">无</el-radio>
                  </el-form-item>
                    </div>
                    <div class="flex-iten">
                         <el-form-item label="讲稿" class="label_center" label-width="70px">
                    <el-radio v-model="poesList.supplierInfoIsSpeech" label="1">有</el-radio>
                    <el-radio v-model="poesList.supplierInfoIsSpeech" label="0">无</el-radio>
                  </el-form-item>
                    </div>
                    <div class="flex-iten">
                        <el-form-item label="PPT" class="label_center" label-width="70px">
                    <el-radio v-model="poesList.supplierInfoIsPpt" label="1">有</el-radio>
                    <el-radio v-model="poesList.supplierInfoIsPpt" label="0">无</el-radio>
                  </el-form-item>
                    </div>
                  </div>
                
              
           
          
          </el-col>
        </el-row>
      </el-form>
      <div style="text-align:right; margin-top:20px;">
         <el-button type="primary" @click="confirmRole">确定</el-button>
        <el-button type="danger" class="cancel_border" plain @click="dialogVisible=false">取消</el-button>
       
      </div>
    </el-dialog>

    <pagination
      v-show="total>=20"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import {
  suppliersList,
  addSupplierWare,
  updatEsettlement,
  delSettlement,
} from "@/api/supplier_settlement";
import { getShootMode, getInvoice, baseUrl2,getCourseCharge ,getPaymentState} from "@/api/remote-search";
import { RegionsProvince } from "@/api/region";
import { regiosList } from "@/api/user";
import{getProvinces} from "@/api/supplier";
import { Message } from "element-ui";
import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination
import {exportMethod} from '@/utils/validate'
export default {
  name: "test",
  components: { Pagination },
  filters: {
    statusColorFilter(status) {
      const statusMap = {
        true: "有",
        false: "无",
       
      };
      return statusMap[status];
    },
    statusFilter(status) {
      const statusMap = {
        1: "进行中",
        2: "已完成",
        3: "已过期",
        0: "新合同",
      };
      return statusMap[status];
    },
  },
  data() {
    return {
      roleName:sessionStorage.getItem('memberName'),
      uploadUrl:'',
      showbtns: false,
      isRolds:sessionStorage.getItem('roids'),
       list: [], editDisabled:false,
       payMents:[],//支付状态
      courseChargeList: [], //课程编导
      provinceList: [], //战区下面省份
      allProvinceList:[],//所有省份
      regiosList: [], //战区
      downloadLoading: false,
      rowEdit: false,
      poesList: {},
      settlementList: {}, //编辑的集合
      total: 0,
      dataObj: { id: "" },
      listLoading: true,
      listQuery: {
        access_token: sessionStorage.getItem("token"),
        page: 1,
        customerName: "",
        regionName:'',
        supplierName:'',
        po:'',
         courseName:'',
          paymentStateName:'',
           taxPoint:'',
         courseChargeName:'',
        pageSize: 20,
      },
      ispath: false,
      invoiceList: [], //发票类型
      shootModeList: [], //拍摄形式
      dialogVisible: false,
      dialogType: "new",
      checkStrictly: false,
      rqId: "",
      ids: "",
    };
  },
  created() {
    this.getList();
    this.getListes();
    this.listQuery.poCourseId = this.$route.query.id;
  },
  computed: {},
 methods: {
      handleImageSuccess(file) {
      if (file.code == 200) {
        this.$message.success(file.message);
        this.getList();
      } else {
        this.$message.error(file.message);
      }
    },
     UploadUrl(){
      return baseUrl2+'/api/file/import_settlement_list'
    },
    handleShowSearch() {
      this.showbtns = !this.showbtns;
    },
    dowloadExcel(){
      
         
      exportMethod(this.listQuery );
        
    },
    handleChangePro4(id) {
      let obj = {};
      obj = this.regiosList.find((item) => {
        return item.region === id;
      });
      this.contractList.regionId = obj.id;
      RegionsProvince(obj.id).then((res) => {
        this.provinceList = res.data.data;
      });
    },
    uploadPath() {
      window.location.href =
        baseUrl2 + "/api/file/download" + this.poesList.acceptanceReportPath;
    },
    getListes() {
       getProvinces().then((res) => {
        this.allProvinceList = res.data.data;
      });
      getPaymentState().then(res=>{
        this.payMents=res.data.data
      })
      getCourseCharge().then((res) => {
this.courseChargeList = res.data.data;
});
      regiosList().then((res) => {
        this.regiosList = res.data.data;
      });
      getShootMode().then((res) => {
        this.shootModeList = res.data.data;
      });
      getInvoice().then((res) => {
        this.invoiceList = res.data.data;
      });
    },
    handleChangePro7(id) {
      let obj = {};
      obj = this.invoiceList.find((item) => {
        return item.name === id;
      });
      this.settlementList.invoiceTypeId = obj.id;
     
    },
    handlePaymentState(id) {
      let obj = {};
      obj = this.payMents.find((item) => {
        return item.name === id;
      });
      this.settlementList.paymentStateId = obj.id;
     
    },
       getList() {
       this.editDisabled = false;
      this.listLoading = true;
      suppliersList(this.listQuery)
        .then((response) => {
          this.list = response.data.data.rows;
          this.total = response.data.data.total;
          this.listLoading = false;
        })
        .catch(() => {
          this.listLoading = false;
        });
    },
    handleDel(id) {
      this.$confirm("确定删除该数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error",
      })
        .then(() => {
          delSettlement(id).then((res) => {
            if (res.data.code == "200") {
              this.$message.success(res.data.message);
              this.getList();
            } else {
              this.$message.error(res.data.message);
            }
          });
          // this.$message({
          //   type: 'success',
          //   message: '删除成功!'
          // });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    handlenewContract() {
      this.dialogType = "new";
      this.dialogVisible = true;
      // this.poesList='';
    },
    beforeUpload(file) {
      this.dataObj.id = this.rqId;
     
    },
      handleEdit(row) {
       this.editDisabled=true;
      this.dialogType = "edit"
      this.settlementList = row;
      row.rowEdit = true;
      this.poesList = row;
      this.rqId = row.id;
      // this.userId = scope.id;
    },
    handleAdd(row) {
      this.dialogType = "new";
      this.dialogVisible = true;

      this.poesList.po = row.po;
      this.poesList.id=row.id;
      this.poesList.customerName=row.customerName;
      this.poesList.provinceName=row.provinceName;
      this.poesList.courseChargeName=row.courseChargeName;
      this.poesList.courseName=row.courseName;
      this.poesList.courseId=row.courseId;
      this.poesList.subjectCategoryName=row.subjectCategoryName;
      this.poesList.majorCategory=row.majorCategory;
      this.poesList.actualTimeLength=row.actualTimeLength
      this.poesList.acceptanceReportPath = row.acceptanceReportPath;
      
      this.poesList.supplierSettlementId = row.id;
      if (this.poesList.acceptanceReportPath==null) {
        
        this.ispath = false;
      } else {
       
        this.ispath = true;
      }
    },
    confirmRole(row, id) {
     const isEdit = this.dialogType ==="edit";
      this.settlementList.rowEdit = false;
      if (isEdit) {
           if (this.settlementList.actualTimeLength) {
          var regS = new RegExp("\\：", "g");
          this.settlementList.actualTimeLength = this.settlementList.actualTimeLength.replace(
            regS,
            ":"
          );
        }
        updatEsettlement(this.settlementList).then((res) => {
          if (res.data.code == "200") {
            this.$message.success(res.data.message);
            // this.dialogVisible = false;
            row.rowEdit = false;
            this.getList();
             this.editDisabled=false;
          } else {
            this.$message.error(res.data.message);
          }
        });
        return false;
      }
      let _this = this;

      addSupplierWare(this.poesList).then((res) => {
        console.log(res);
        if ((res.code = "200")) {
          this.$message.success(res.data.message);

          _this.dialogVisible = false;
          _this.suppliersList = "";
          _this.getList();
        }
      });
    },
    handleDownload() {
      this.downloadLoading = true;
      import("@/vendor/Export2Excel").then((excel) => {
        const tHeader = ["Id", "Title", "Author", "Readings", "Date"];
        const filterVal = [
          "id",
          "title",
          "author",
          "pageviews",
          "display_time",
        ];
        const list = this.list;
        const data = this.formatJson(filterVal, list);
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: this.filename,
          autoWidth: this.autoWidth,
          bookType: this.bookType,
        });
        this.downloadLoading = false;
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) =>
        filterVal.map((j) => {
          if (j === "timestamp") {
            return parseTime(v[j]);
          } else {
            return v[j];
          }
        })
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.el-dialog__body{

}
.part1 span{
  text-align: left;
}

.el-form-item{
  margin-bottom: 15px;
}
.flex-box{
  display: flex;
  .flex-iten3{
    flex: 3;
  }
  .flex-iten2{
    flex: 2;
  }
  .flex-iten{
      flex: 1;
      .el-radio{
        margin-right:15px
      }
  }
}

.el-rate{
  line-height: 2;
}
.label-30 .el-form-item__label {
  width: 30px !important;
}
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>
